<template>
	<view class="home-notice">
		<view class="notice-left">
			<image src="../../static/images/newIcon/icon/notice.png" mode="" style="width:30rpx;height:30rpx;display: inline-block;"></image>
			<view class="notice-tip1">通知</view>
			<view class="notice-tip2">公告</view>
		</view>
		<!-- <view class="notice-content">
			访客预约功能已经开通，业主可以...
		</view> -->
		<view class="notice-right">
			<view class="notice-content" v-for="item in list" :key="item.id">
				{{item.value}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						value: '访客预约功能已经开通，业主可以自主帮助访客预约'
					},
					{
						id: 2,
						value: '业主可以在垃圾分类模块查看垃圾分类知识，在我的页面查看积分'
					},
				]
			}
		}
	}
</script>

<style scoped>
	.home-notice {
		display: flex;
		margin: 0 25rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		border: 1rpx solid #EEEEEE;
		/* box-shadow: 0rpx 3rpx 9rpx 1rpx rgba(150, 153, 161, 0.14); */
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(211, 211, 211, 0.49);
	}

	.notice-tip1 {
		display: inline-block;
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #4672FF;
	}

	.notice-tip2 {
		display: inline-block;
		font-size: 28rpx;
		color: #4F4F4F;
	}

	.notice-left {
		width: 180rpx;
		display: flex;
		align-items: center;
		padding-right: 20rpx;
		border-right: 1rpx solid #E6E6E6;
	}

	.notice-right {
		display: inline-block;
		width: calc(100% - 180rpx);
		padding-left: 20rpx;
		height: 40rpx;
		overflow-y: auto;
	}

	.notice-content {
		font-size: 28rpx;
		
		color: #373737;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
</style>
